<!DOCTYPE html>
<html style="height: 100%" lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">

	<div id="main" style="height: 100%"></div>

	<script type="text/javascript"
		th:src="@{/ajax/libs/echarts/5.0.1/dist/echarts.min.js}"></script>
	<script type="text/javascript">
	var chartDom = document.getElementById('main');
	var myChart = echarts.init(chartDom);
	var option;

	function getVirtulData(year) {
	    year = year || '2017';
	    var date = +echarts.number.parseDate(year + '-01-01');
	    var end = +echarts.number.parseDate((+year + 1) + '-01-01');
	    var dayTime = 3600 * 24 * 1000;
	    var data = [];
	    for (var time = date; time < end; time += dayTime) {
	        data.push([
	            echarts.format.formatTime('yyyy-MM-dd', time),
	            Math.floor(Math.random() * 10000)
	        ]);
	    }
	    return data;
	}

	option = {
	    title: {
	        top: 30,
	        left: 'center',
	        text: '2016年某人每天的步数'
	    },
	    tooltip: {},
	    visualMap: {
	        min: 0,
	        max: 10000,
	        type: 'piecewise',
	        orient: 'horizontal',
	        left: 'center',
	        top: 65
	    },
	    calendar: {
	        top: 120,
	        left: 30,
	        right: 30,
	        cellSize: ['auto', 13],
	        range: '2016',
	        itemStyle: {
	            borderWidth: 0.5
	        },
	        yearLabel: {show: false}
	    },
	    series: {
	        type: 'heatmap',
	        coordinateSystem: 'calendar',
	        data: getVirtulData(2016)
	    }
	};

	option && myChart.setOption(option);
	</script>
</body>
</html>